<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>个人中心-我的优惠券</title>
  <meta name="keywords" content="">
  <meta name="description" content="">

  <div th:include="includeJs::includeJs"></div>
  <div th:include="includeJs::layui_js"></div>

  <link rel="stylesheet" th:href="@{/css/account/lay-cz.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/common.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/user.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/fileupload.less.css}">

  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/userInfo/common.js}"></script>
  <script type="text/javascript" th:src="@{/js/userInfo/user.js}"></script>
  <style type="text/css">
    .wdhb-tab .on  a{color:#fff;}
  </style>
</head>
<body>
<!--最上面-->
<link th:replace="includeJs::dingding_header">
<!--第二上面-->
<div style="background-color: white;width: 100%">
  <link th:replace="includeJs::dingding_nav">
</div>
<!--个人中心-->
<div class="wrapper wbgcolor">
  <div class="w1200 personal">
    <link th:replace="includeJs::userInfoMenu">
    <div class="personal-main">
      <div class="personal-zqzr personal-xtxx" style="min-height: 500px;">
        <h3><i>我的优惠券</i></h3>
        <form id="form" name="form" method="post" action="">
          <script type="text/javascript">clearPage = function() {PrimeFaces.ab({source:'form:j_idt76',formId:'form',process:'form:j_idt76',params:arguments[0]});}</script>
          <span id="form:dataTable">
            <div id="wdhb-tab" class="wdhb-tab">
              <ul class="screen">
                <li class="on"><input value="1" hidden class="state"><a href="javascript:void(0)" title="未使用">未使用</a></li>
                <li><a href="javascript:void(0)" title="已使用"><input value="2" hidden class="state">已使用</a></li>
                <li><a href="javascript:void(0)" title="已过期"><input value="3" hidden class="state">已过期</a></li>
              </ul>
            </div>
            <div class="wdhb-title"><span class="wdhb-name">优惠券名称</span><span class="wdhb-con">优惠券简介</span><span class="wdhb-deadline" style="width: 145px;">截止日期</span> <span class="wdhb-status">状态</span> </div>
            <div class="zqzr-list">
              <ul class="couponList">

              </ul>
            </div>
          </span>
        </form>
      </div>
    </div>
  </div>
</div>
<link th:replace="includeJs::userInfoJS">
</body>
<script>
  function formatDate(now) {
    var year=now.getFullYear();  //取得4位数的年份
    var month=now.getMonth()+1;  //取得日期中的月份，其中0表示1月，11表示12月
    var date=now.getDate();      //返回日期月份中的天数（1到31）
    var hour=now.getHours();     //返回日期中的小时数（0到23）
    var minute=now.getMinutes(); //返回日期中的分钟数（0到59）
    var second=now.getSeconds(); //返回日期中的秒数（0到59）
    return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
  }
  $(function () {
    mycoupon();
    $(".screen").on('click','li',function () {
        $(".screen").find("li").removeClass("on");
        $(this).addClass("on");
        let a = $(this).find(".state").val();
        mycoupon(a);
    })
  });
  function mycoupon(states) {
      let state = 1;
      if(states != null && states != ''){
          state=states;
      }
      $.post('/myCouponList',{state:state},function (data) {
          $(".couponList").empty();
          $.each(data.obj,function (index,value) {
            var d = new Date(value.expiration_date);
            let date = formatDate(d);
            let state;
            if(value.coupon_state == 1){
              state = "<a href='http://localhost:8080/specimens/toMytz' type=\"button\" name=\"moren\" class=\"layui-btn layui-btn-normal layui-btn-xs\">去使用</a>"
            }else if(value.coupon_state == 2){
              state = "已使用"
            }else if(value.coupon_state == 3){
              state = "已过期"
            }
            $(".couponList").append("<li style=\"width: 100%;\"><span class=\"wdhb-name\">"+value.coupon_name+"</span><span class=\"wdhb-con\">"+value.coupon_info+"</span><span style='width: 145px;' class=\"wdhb-deadline\">"+date+"</span> <span class=\"wdhb-status\"><a href=\"#\">"+state+"</a></span></li>\n")
          })
      })
  }
</script>
</html>
